<template>
	<view>
		<form @submit="modityInfo">
			<view v-if="mType=='avatar'">
				<view class="info-wapper">
					<input name="birthday" type="text" :value="userInfo.avatar" class="input" placeholder="请输入用户账号"
						placeholder-class="graywords" />
				</view>
			</view>

			<view v-if="mType=='username'">
				<view class="info-wapper">
					<input name="username" type="text" :value="userInfo.username" class="input" placeholder="请输入用户账号"
						placeholder-class="graywords" />
				</view>
			</view>

			<view v-if="mType=='birthday'">
				<view class="info-wapper">
					<picker class="input" mode="date" :value="userInfo.birthday" @change="bindDateChange">
						<view class="uni-input">{{userInfo.birthday}}</view>
					</picker>
				</view>
			</view>

			<view v-if="mType=='sex'">
				<view class="info-wapper">
					
					 <radio-group @change="radioChange">
					    <label class="radio"><radio value="0" :checked="userInfo.sex==0" />男</label>
						<label class="radio"><radio value="1" :checked="userInfo.sex==1" />女</label>
					 </radio-group>	
				</view>
			</view>

			<button form-type="submit" type="primary" style="margin-top: 40upx;">确认修改</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})

			return {
				mType: "",
				userInfo: {},
				date: currentDate
			}
		},
		onShow() {
			var user = uni.getStorageSync('gUser');
			if (user) {
				this.userInfo = user;
			} else {
				uni.showToast({
					title: "请先进行登录，谢谢~",
					mask: false,
					duration: 800
				})
				uni.switchTab({
					url: "../me/me"
				})
			}
		},
		onLoad(par) {
			console.log(par)
			this.mType = par.mtype;
		},
		methods: {
			modityInfo(e) {
				console.log(e)
				var { username } = e.detail.value;

				if (this.mType == "username") {
					this.userInfo.username = username;
				}
				if (this.mType == "birthday") {
					// this.userInfo.birthday = this.date;
				}
				if (this.mType == "sex") {
					// this.userInfo.sex = sex; 
				}
				console.log(this.userInfo)
				uni.setStorageSync("gUser", this.userInfo);

				// 回退 back
				uni.navigateBack({
					delta: 1
				})

			},
			bindDateChange: function(e) {
				this.userInfo.birthday = e.target.value
			},
			radioChange(e){
				this.userInfo.sex =  e.detail.value;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>


<style>
	.info-wapper {
		display: flex;
		flex-direction: row;
		/* justify-content: center; */

		margin-top: 20upx;
		padding-bottom: 20upx;
	}

	.input {
		margin-left: 30upx;
	}
	
	.radio {
		display: block;
		margin-left: 30upx;
		padding: 20upx 0upx;
	}
</style>
